<template>
  <div>
    <ul class="ssdh">
      <li v-for="(v, i) in obj" :key="i" @click="funx(i)" :class="v.bool? 'red' : ''">
        {{ v.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: [
        { title: "单曲", bool: true },
        { title: "声音", bool: false },
        { title: "MV", bool: false },
      ],
    };
  },
  methods: {
    funx(i) {
      console.log(i);
      this.obj[i].bool = !this.obj[i].bool;
      // if( this.obj[i].style){

      // }
    },
  },
};
</script>

<style scoped>
.ssdh {
  padding-top: 0.44rem;
  width: 5.57rem;
  height: 0.36rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.3rem;
  color: #5c5c5c;
}
.red {
  color: red;
}
</style>